scripty2

colorFromString #

S2.CSS.colorFromString(color) -> String

• color (String) – Color in #abc, #aabbcc or rgba(1,2,3) format

Returns a normalized color in the #aabbcc format.

• #abc -> Expanded to #aabbcc
• #aabbcc -> not changed
• rgb(1,2,3) -> Expanded to #010203
• other input -> not changed

This method does not support HTML color constants.

interpolate #

S2.CSS.interpolate(property, from, to, position) -> Number | String

• property (String) – CSS property name to interpolate (e.g. 'font-size')
• from (String | Number) – Original value
• to (String | Number) – Target value
• position (Number) – interpolation position between 0 (original) and 1 (destination)

Returns the value for an arbitrary position between two CSS property values. The type of interpolation will be automatically choosen based on the the CSS property. Positions less then 0 and greater than 1 are possible.

S2.CSS.interpolate('font-size', '14px', '18px', 0.5) -> '16px'
S2.CSS.interpolate('background-color', '#abc', '#def', 0.5) -> '#c4d5e6'
S2.CSS.interpolate('opacity', 1, 0, 0.75) -> 0.25
S2.CSS.interpolate('zIndex', 1, 10, 0.75) -> 8

To generate a list of supported CSS properties and types, use:

$H(S2.CSS.PROPERTY_MAP).map(function(v){
  return v[0].underscore().dasherize(r)+' ('+v[1]+')';
}).join(', ');

interpolateColor #

S2.CSS.interpolateColor(from, to, position) -> String

• from (String) – Original color in #abc, #aabbcc or rgba(1,2,3) format
• to (String) – Target color in #abc, #aabbcc or rgba(1,2,3) format
• position (Number) – interpolation position between 0 (original) and 1 (target)

Returns a color in #aabbcc format for an arbitrary position between two colors. Positions less then 0 and greater than 1 are possible.

S2.CSS.interpolateColor('#ffffff', '#000000', 0.5) -> '#808080'

This method does not support HTML color constants as input values.

interpolateInteger #

S2.CSS.interpolateInteger(from, to, position) -> Number

• from (Number) – Original number
• to (Number) – Target number
• position (Number) – interpolation position between 0 (original) and 1 (destination)

Returns a number rounded to the next integer for an arbitrary position between two numbers. Positions less then 0 and greater than 1 are possible.

S2.CSS.interpolateInteger(1, 5, 0.5);  -> 3
S2.CSS.interpolateInteger(2, 4, 0.1);  -> 2
S2.CSS.interpolateInteger(1, 10, 2);   -> 19
S2.CSS.interpolateInteger(1, 2, -0.5); -> 1

interpolateLength #

S2.CSS.interpolateLength(from, to, position) -> String

• from (Number) – Original CSS length
• to (Number) – Target CSS length (unit must be the same as in the from argument)
• position (Number) – interpolation position between 0 (original) and 1 (destination)

Returns a CSS length for an arbitrary position between two CSS lengths. Positions less then 0 and greater than 1 are possible.

S2.CSS.interpolateLength('12px','18px',0.5)-> '15px'
S2.CSS.interpolateLength('10%','30%',0.7) -> '24%'

interpolateNumber #

S2.CSS.interpolateNumber(from, to, position) -> Number

• from (Number) – Original number
• to (Number) – Target number
• position (Number) – interpolation position between 0 (original) and 1 (destination)

Returns a number for an arbitrary position between two numbers. Positions less then 0 and greater than 1 are possible.

S2.CSS.interpolateNumber(1, 2, 0.5)  -> 1.5
S2.CSS.interpolateNumber(1.5, 4.5, 0.1) -> 1.8
S2.CSS.interpolateNumber(1, 10, 2)   -> 3
S2.CSS.interpolateNumber(1, 2, -0.5) -> 0.5

normalize #

S2.CSS.normalize(element, style) -> Object

• element (Element) – The element on which the styles will be applied.
• style (Object | String) – The styles to be applied to the element.

"Normalizes" the given CSS by removing lines that will have no effect on the element. For instance, will remove "width: 200px" from the style if the element is already 200px wide.

normalizeColor #

S2.CSS.normalizeColor(color) -> Array

• color (String) – Color in #abc, #aabbcc or rgba(1,2,3) format

Returns the value of a CSS color as a RGB triplet:

• #abc -> [170, 187, 204]
• #aabbcc -> not changed
• rgb(1,2,3) -> [1, 2, 3]
• #xyz -> [NaN, NaN, NaN]

This method does not support HTML color constants.

parseStyle #

S2.CSS.parseStyle(string) -> Object

Takes a string of CSS rules and parses them into key/value pairs. Shortcut properties, colors and opacity settings on IE are normalized.

Example:

S2.CSS.parseStyle('font-size:11px; border:12px solid #abc; border-left-width: 5px') ->

{
  borderBottomColor: '#aabbcc',
  borderBottomWidth: '12px',
  borderLeftColor:   '#aabbcc',
  borderLeftWidth:   '#5px',
  borderRightColor:  '#aabbcc',
  borderRightWidth:  '12px',
  borderTopColor:    '#aabbcc',
  borderTopWidth:    '12px',
  fontSize:          '11px'
}

serialize #

S2.CSS.serialize(object) -> String

• object (Object) – An object of CSS property-value pairs.

Converts an object of CSS property-value pairs into a string suitable for setting an element's cssText property.

vendorizeProperty #

S2.CSS.vendorizeProperty(property) -> String

• property (String) – A CSS property.

Converts a non-vendor-prefixed CSS property into its vendor-prefixed equivalent, if one exists.

Examples

S2.CSS.vendorizeProperty('border-radius');
//-> "-moz-border-radius" (if the user is running Firefox)
S2.CSS.vendorizeProperty('width'); //-> "width"
S2.CSS.vendorizeProperty('narf');  //-> "narf"